<template>
  <a-row>
    <a-col :span="24">
      <a-card title="设备缺陷管理页面">
        <a-table :columns="columns" :dataSource="defectList" rowKey="defectId" bordered>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a @click="toggleExpand(record)">
                {{ record.expanded ? '收起' : '展开' }}
              </a>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-col>

    <a-col :span="24" v-if="expandedDefect">
      <a-card title="历史事项" style="margin-top: 20px">
        <a-table :columns="historyColumns" :dataSource="expandedDefect.history" rowKey="historyId" bordered />
      </a-card>
    </a-col>

    <a-col :span="24" style="margin-top: 20px">
      <a-button type="primary" @click="addDefect">新增缺陷</a-button>
      <a-button style="margin-left: 10px" @click="exportReport">导出缺陷报告</a-button>
    </a-col>
  </a-row>
</template>

<script setup>
  import { ref, reactive } from 'vue';

  // 缺陷数据
  const defectList = reactive([
    { defectId: 'DEF-001', description: '电机过热', priority: '高', expanded: false },
    { defectId: 'DEF-002', description: '电压波动', priority: '中', expanded: false },
    { defectId: 'DEF-003', description: '轴承磨损', priority: '高', expanded: false },
    { defectId: 'DEF-004', description: '温度传感器故障', priority: '低', expanded: false },
    { defectId: 'DEF-005', description: '控制器失灵', priority: '高', expanded: false },
  ]);

  // 历史事项数据
  const historyData = {
    'DEF-001': [
      {
        historyId: 'H001',
        equipmentName: '电机1',
        equipmentId: 'EQP-001',
        defectId: 'DEF-001',
        description: '电机过热',
        priority: '高',
        status: '已处理',
        progress: '100%',
        responsible: '张三',
        solution: '更换电机',
        startTime: '20240910 8:20',
        endTime: '20240911 9:23',
      },
      {
        historyId: 'H002',
        equipmentName: '电机2',
        equipmentId: 'EQP-002',
        defectId: 'DEF-001',
        description: '电机过热',
        priority: '高',
        status: '处理中',
        progress: '70%',
        responsible: '李四',
        solution: '调整通风',
        startTime: '20240910 8:20',
        endTime: '***',
      },
    ],
    'DEF-002': [
      {
        historyId: 'H003',
        equipmentName: '配电柜1',
        equipmentId: 'EQP-003',
        defectId: 'DEF-002',
        description: '电压波动',
        priority: '中',
        status: '未处理',
        progress: '0%',
        responsible: '王五',
        solution: '待定',
        startTime: '20240910 8:20',
        endTime: '***',
      },
    ],
  };

  // 当前展开的缺陷
  const expandedDefect = ref(null);

  // 缺陷列表列配置
  const columns = [
    { title: '缺陷编号', dataIndex: 'defectId', key: 'defectId' },
    { title: '缺陷描述', dataIndex: 'description', key: 'description' },
    { title: '优先级', dataIndex: 'priority', key: 'priority' },
    { title: '历史事项', key: 'action' },
  ];

  // 历史事项列配置
  const historyColumns = [
    { title: '设备名称', dataIndex: 'equipmentName', key: 'equipmentName' },
    { title: '设备编号', dataIndex: 'equipmentId', key: 'equipmentId' },
    { title: '缺陷编号', dataIndex: 'defectId', key: 'defectId' },
    { title: '缺陷描述', dataIndex: 'description', key: 'description' },
    { title: '优先级', dataIndex: 'priority', key: 'priority' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '进度', dataIndex: 'progress', key: 'progress' },
    { title: '责任人', dataIndex: 'responsible', key: 'responsible' },
    { title: '解决方案', dataIndex: 'solution', key: 'solution' },
    { title: '缺陷起始时间', dataIndex: 'startTime', key: 'startTime' },
    { title: '缺陷结束时间', dataIndex: 'endTime', key: 'endTime' },
  ];

  // 展开/收起历史事项
  const toggleExpand = (record) => {
    if (record.expanded) {
      expandedDefect.value = null;
    } else {
      expandedDefect.value = { ...record, history: historyData[record.defectId] || [] };
    }
    record.expanded = !record.expanded;
  };

  // 新增缺陷
  const addDefect = () => {
    console.log('新增缺陷');
  };

  // 导出缺陷报告
  const exportReport = () => {
    console.log('导出缺陷报告');
  };
</script>

<style scoped>
  a-button {
    margin-right: 10px;
  }
</style>
